<template>
    <div class="top ovfl">
      <span class="fl"><router-link to="/">快递站<span v-if="type"> —— {{type}}端</span></router-link></span>
      <div class="fr" v-show="!token">
        <router-link to="/login">登录</router-link> | <router-link to="/register">注册</router-link>
      </div>
      <div class="fr" v-show="token">
        <span style="margin-right: 10px">欢迎，{{info.username}}！</span>
        <a href="javascript:;" style="margin-right: 10px" @click="seeNews" v-show="type == '网点'||type == '中转站'">
          查看消息
          <span style="color: red" v-show="messgeList.length">({{messgeList.length}})</span>
        </a> 
        <a href="javascript:;" @click="loginOut">退出</a> 
      </div>
      <el-drawer
        title="消息"
        :visible.sync="drawer"
        :with-header="false">
        <div style="border-bottom: 1px solid #ccc;color: #f00; padding: 10px 5px; text-align: left" 
          v-for="(item,index) in messgeList" :key="index">
          <span>{{item.content}}</span>
          <el-button type="danger" size="mini" @click="yidu(item.id)">标记已读</el-button>
        </div>
      </el-drawer>
    </div>
</template>
<script>
  import global from "@/lib/global"
  import qs from 'qs'
  export default {
    name: 'header-top',
    props:["type","number"],
    data() {
      return {
        token: sessionStorage.getItem('token'),
        info:{},
        drawer: false,
        messgeList:{},
        newList:{}
      };
    },
    created(){
      if(sessionStorage.getItem('token')){
        this.$axios({
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
                'token':sessionStorage.getItem('token')
            },
            method: 'get',
            url: global.baseUrl + '/userInfo/userInfoDetail',
        })
        .then((resp)=>{
            if(resp.data.success){
              this.info = resp.data.data;
            }else{
                this.$message.error(resp.data.message);
            }
        })
        .catch((error)=>{
            this.$message.error('网络连接失败');
        })

        this.$axios({
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
                'token':sessionStorage.getItem('token')
            },
            method: 'get',
            url: global.baseUrl + '/messge/list',
        })
        .then((resp)=>{
            if(resp.data.success){
                this.messgeList = resp.data.data
            }else{
                this.$message.error(resp.data.message);
            }
        })
        .catch((error)=>{
            this.$message.error('网络连接失败');
        })
      }
    },
    methods:{
      loginOut(){
        sessionStorage.removeItem('token');// 把token移除
        this.$router.push('/login')
      },
      seeNews(){
        this.drawer = true;
      },
      yidu(id){
        this.$axios({
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
                'token':sessionStorage.getItem('token')
            },
            method: 'POST',
            url: global.baseUrl + '/messge/updateState',
            data: qs.stringify({'id':id})
        })
        .then((resp)=>{
            if(resp.data.success){
               this.$message({
                message: '标记成功',
                type: 'success'
              });
            }else{
                this.$message.error(resp.data.message);
            }
        })
        .catch((error)=>{
            this.$message.error('网络连接失败');
        })
      }
    }
  }
</script>
<style  scoped>

</style>